<template>
    <div id="questionBoard">
        <a-card :bordered="false" id="questionCard">
            <md-viewer :value="props" />
            <a-divider />
            <a-button v-if="levelNum > 0" style="float: left" @click="toPrevLevel">
                上一关
            </a-button>
            <a-button 
            v-if="levelNum < mainLevels.length - 1"
            type="primary" 
            style="float: right" 
            :disabled="Result.resultStatus !== RESULT_STATUS_ENUM.SUCCEED"
            @click="toNextLevel">
                下一关
            </a-button>
            <a-button
          v-if="levelNum === mainLevels.length - 1"
          type="primary"
          style="float: right"
          :disabled="Result.resultStatus !== RESULT_STATUS_ENUM.SUCCEED"
          @click="doWin"
        >
          恭喜通关
        </a-button>
        </a-card>

    </div>
</template>
<script setup>
import {  useRouter } from "vue-router";
const router = useRouter();
import {watch, computed,toRefs} from "vue";
import MdViewer from "./MdViewer.vue";
import {getCurrentLevelNum, getNextLevel, getPrevLevel}from "../levels/level"
import { RESULT_STATUS_ENUM } from "../common/result";
const props = defineProps(['level'])
const { level } = toRefs(props);
const levelNum = computed(() => {
  return getCurrentLevelNum(level.value);
});
import { useResultStore } from '@/stores/counter'
import mainLevels from "../levels/mainLevels";
const Result = useResultStore()
/**
 * 切换关卡时，回到顶部
 */
 watch([levelNum], () => {
  scrollTo({
    top: 0,
  });
  const questionCardDom = document.getElementById("questionCard");
  if (questionCardDom) {
    questionCardDom.scrollTop = 0;
  }
});
/**
 * 上一关
 */
 const toPrevLevel = () => {
  const toLevel = getPrevLevel(level.value);
  if (toLevel) {
    router.push(`/learn/${toLevel.key}`);
  }
};
/**
 * 下一关
 */
 const toNextLevel = () => {
  const toLevel = getNextLevel(level.value);
  if (toLevel) {
    router.push(`/learn/${toLevel.key}`);
  }
};
/**
 * 通关
 */
 const doWin = () => {
  alert("恭喜通关，有收获的话，欢迎给本项目一个 star 哦~");
};
</script>
<style>
#questionBoard #questionCard {
  max-height: calc(100vh - 100px);
  min-height: 600px;
  overflow-y: auto;
}
</style>
